<template>
    <div>
        <pagetitle type="2"></pagetitle>
        <el-card>
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="现金账户" name="first">
                    <div class="tabpane1">
                        <el-button>导出</el-button>
                        <div class="tabpane1r">
                            <el-date-picker
                                v-model="value"
                                type="daterange"
                                start-placeholder="Start date"
                                end-placeholder="End date"
                                style="width: 310px; margin-right: 20px"
                            />
                            <el-select v-model="value" placeholder="订单号/交易号" style="width: 145px">
                                <el-option label="item.label" value="item.value" />
                                <el-option label="item.label" value="item.value" />
                                <el-option label="item.label" value="item.value" />
                            </el-select>
                            <el-input v-model="input1" style="width: 280px" placeholder="Please input">
                                <template #suffix>
                                    <el-icon class="el-input__icon"><Search /></el-icon>
                                </template>
                            </el-input>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="代金券" name="second">代金券</el-tab-pane>
            </el-tabs>
        </el-card>
        <el-card style="margin-top: 20px">
            <div class="zmoney">当前区间汇总</div>
            <div class="computationalformula">
                <div class="formulaItem">
                    <div class="itemname">期末余额</div>
                    <div class="itemnum">￥2000.00 =</div>
                </div>
                <div class="formulaItem">
                    <div class="itemname">期初余额</div>
                    <div class="itemnum">20.00 +</div>
                </div>
                <div class="formulaItem">
                    <div class="itemname">收入</div>
                    <div class="itemnum">20.00 -</div>
                </div>
                <div class="formulaItem">
                    <div class="itemname">支出</div>
                    <div class="itemnum">20.00</div>
                </div>
            </div>
        </el-card>
        <el-card style="margin-top: 20px">
            <el-table :data="[{}]" style="width: 100%">
                <el-table-column prop="date" label="流水号" />
                <el-table-column prop="name" label="交易时间" />
                <el-table-column prop="name" label="交易类型" />
                <el-table-column prop="name" label="交易渠道" />
                <el-table-column prop="name" label="交易渠道流水号" />
                <el-table-column prop="name" label="订单号/交易号" />
                <el-table-column prop="name" label="备注" />
                <el-table-column prop="name" label="账期" />
                <el-table-column prop="name" label="收支类型" />
                <el-table-column prop="name" label="金额（￥）" />
                <el-table-column prop="name" label="余额（￥）" />
                <el-table-column prop="name" label="账号" />
            </el-table>
        </el-card>
    </div>
</template>
<script setup lang="ts">
const activeName = "first";
</script>
<style scoped lang="scss">
.tabpane1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .tabpane1r {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
}
.zmoney {
    font-weight: 500;
    font-size: 14px;
    color: #000000;
    margin-bottom: 20px;
}
.computationalformula {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    .formulaItem {
        margin-right: 10px;
        .itemname {
            font-size: 12px;
            color: #666666;
            margin-bottom: 10px;
        }
        .itemnum {
            font-weight: bold;
            font-size: 20px;
            color: #333333;
        }
    }
}
</style>
